<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
	String wsBasePath = "ws://"+request.getServerName()+":"+request.getServerPort()+path+"/";
	session.setAttribute("farmUsername", "userA");
%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="<%=basePath%>ext/easyui/themes/black/easyui.css?t=34355">
    <link rel="stylesheet" type="text/css" href="<%=basePath%>ext/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="<%=basePath%>ext/easyui/themes/color.css">
    <link rel="stylesheet" type="text/css" href="<%=basePath%>ext/farm/farm.css">
	<link rel="stylesheet" type="text/css" href="<%=basePath%>ext/farm/game.css">
    <link rel="stylesheet" type="text/css" href="<%=basePath%>ext/user/userChoice.css">
    <script type="text/javascript" src="<%=basePath%>ext/farm/utils.js"></script>
    <script type="text/javascript" src="<%=basePath%>ext/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>ext/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>ext/easyui/plugins/jquery.edatagrid.js"></script>
    <script type="text/javascript" src="<%=basePath%>ext/easyui/locale/easyui-lang-zh_CN.js"></script> 
    <script type="text/javascript" src="<%=basePath%>ext/farm/sockjs.js"></script> 
</head>
<style type="text/css">
	body, html{
		width: 100%; 
		height: 100%; 
		background-image: url(<%=basePath%>/images/background.png);
	}
	
	.content{
		
	}
	
	#rain{
		position: absolute;
		background-color: rgba(0, 0, 0, 0.5);
		top: 0;
		left: 0;
		display: none;
	}
	
	#sun{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-image: url(<%=basePath%>/images/clearBg.png);
		background-repeat: no-repeat;
		background-size: 100%;
		/* opacity: 0.8; */
		display: none;
	}
	
	#title{
		position: absolute;
		width: 15%;
		height: 50px;
		top: 10px;
		left: 0;
		text-align: center;
		color: white;
		font-size: 16px;
		line-height: 50px;
		font-weight: 700;
	}
	.timeNumber{
		position: absolute; background-image:-webkit-linear-gradient(135deg, #49e3ce 40%, #007ACC 60%); 
		bottom: 5px; 
		right: 5px; 
		font-size: 10px; 
		color: white; 
		text-align: center; 
		line-height: 20px; 
		border-radius: 50%; 
		width: 15px; 
		height: 20px;
	}
</style>
<body>
<!-- 除草 -->
<audio id="cleanLandSound" src="<%=basePath%>/sounds/cleanLand.mp3"></audio>
<!-- 收获 -->
<audio id="harvestSound" src="<%=basePath%>/sounds/harvest.mp3"></audio>
<!-- 种植 -->
<audio id="hasPlantedSound" src="<%=basePath%>/sounds/hasPlanted.mp3"></audio>
<!-- 除虫 -->
<audio id="killWormSound" src="<%=basePath%>/sounds/killWorm.mp3"></audio>
<!-- 土地不合法 -->
<audio id="negativeSound" src="<%=basePath%>/sounds/negative.mp3"></audio>
<!-- 生虫 -->
<audio id="wormSound" src="<%=basePath%>/sounds/worm.mp3"></audio>
<!-- 打开种子收纳袋 -->
<audio id="plant" src="<%=basePath%>/sounds/plant.mp3"></audio> 
<!-- 焕然一新 -->
<audio id="clear" src="<%=basePath%>/sounds/clear.mp3"></audio>
<!-- 闪电 -->
<audio id="lightning" src="<%=basePath%>/sounds/lightning.mp3"></audio> 
<!-- 雨声 -->
<audio id="raining" src="<%=basePath%>/sounds/raining.mp3"></audio> 
<!-- 打雷 -->
<audio id="light" src="<%=basePath%>/sounds/light.mp3"></audio> 

<!-- 下雨 -->
<div id="title"><a id="titleA">茁壮成长...</a></div>
<canvas id="rain" width="100%" height="100%"></canvas>
<div id="sun"></div>
<!-- 土地 -->
<div class="content">
	
</div>

<div id="userChoiceDialog" class="easyui-window" title="种子收纳袋" minimizable="false" collapsible="false" maximizable="false"
	data-options="iconCls:'icon-showSeedBag', closed: true" 
	 style="width: 600px; height: 230px; padding: 4px;" scrolling="no">
	<div class="showSeedBag">
		<div class="control-box">
			<div class="prev" onclick="scorllLeft()"><img src="<%=basePath%>/images/left.png" alt="prev"></div>
			<div class="bigbox">
				<div class="switcher">
	
				</div>
			</div>
			<div class="next" onclick="scorllRight()"><img src="<%=basePath%>/images/right.png" alt="next"></div>
		</div>
	</div>
	<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" style="position: absolute; right: 10px; bottom: 9px;"
				onclick="javascript:$('#userChoiceDialog').dialog('close')">关闭窗口</a>
</div>

<script type="text/javascript">

	/* ====================加载声音============================== */

   	$(function(){
   		var cleanLandSound = $("#cleanLandSound")[0];
   	   	var harvestSound = $("#harvestSound")[0];
   	   	var hasPlantedSound = $("#hasPlantedSound")[0];
   	   	var killWormSound = $("#killWormSound")[0];
   	   	var negativeSound = $("#negtiveSound")[0];
   	   	var wormSound = $("#wormSound")[0];
   	   	var plant = $("#plant")[0];
	})
	
	/* ------------------webSocket------------------ */
	var websocket = null; 
	function initWebSocket(){	    	     
	    if ('WebSocket' in window) {  
	        //Websocket的连接  
	        websocket = new WebSocket("<%=wsBasePath%>/farm/action");//WebSocket对应的地址  
	    }  
	    else if ('MozWebSocket' in window) {  
	        //Websocket的连接  
	        websocket = new MozWebSocket("<%=wsBasePath%>/farm/action");//SockJS对应的地址  
	    }  
	    else {  
	        //SockJS的连接  
	        websocket = new SockJS("<%=wsBasePath%>/farm/action");//SockJS对应的地址    
	    }  
	    websocket.onopen = onOpen;  
	    websocket.onmessage = onMessage;  
	    websocket.onerror = onError;  
	    websocket.onclose = onClose;
	}

	function onOpen(evt) {  
	    console.log("连接打开：",evt);  
	}  
	
	function onMessage(evt) {
		setFarmView(evt.data);
	}  
	function onError(evt) {  
		console.log("出现错误：",evt);
	}  
	function onClose(evt) {  
		console.log("连接关闭：",evt);
	}
	window.close = function () {  
        websocket.onclose();  
    }
    // 打开webSocket
    initWebSocket();
    
 	// 设置定时器
   	var interval = setInterval('timeFlies()', 1000);
    var flies = 0;
    var rain = document.getElementById("rain");
    var sun = document.getElementById("sun");
    /* var isClear = 0; */
    var isInsectLand = [];
    function timeFlies(){
    	$("#titleA").html("茁壮成长...");
    	// panel-header panel-header-noborder window-header
    	flies += 2;
    	/* isClear = 0; */
    	if(flies >= 0 && flies < 15){
    		$("#titleA").html("大雨倾盆...");
    		if(flies == 2){
    			lightning.play();
    		}
    		if(flies == 4){
    			raining.play();
    		}
    		rain.style.display = 'block';
    		sun.style.display = 'none';
    		
    		if(flies > 2){
    			var insects = document.getElementsByClassName("insectImg");
        		var warningImgs = document.getElementsByClassName("warningImg");
        		for(let i = insects.length - 1; i >= 0; i--){
        			var landId = insects[i].id.split("_")[1];
        			isInsectLand.push(landId);
        			console.log("isInsectLand ===");
        			console.log(isInsectLand);
        			$("#land_" + landId).attr('onclick', 'showSeedBagList(this)');
        			var lightningImg = '<img style="position: absolute; right: 10px; width: 50px; height: 300px;" id="lightningImg" src="<%=basePath%>/images/gif/light.gif">';
        			$("#land_" + landId).append(lightningImg);
        			
        			setTimeout('clearLightning()', 800);
        			insects[i].remove();
        			warningImgs[i].remove();
        			$.get('<%=basePath%>/farm/killInsect', {landId:parseInt(landId)}, successfulKillInsectByLight);
        		}
    		}
    		
    	}else if(flies >= 16 && flies < 18){
    		$("#titleA").html("焕然一新...");
    		/* isClear = 1; */
    		rain.style.display = 'none';
    		sun.style.display = 'block';
    		console.log("isInsectLand.length ====== " + isInsectLand.length);
    		for(let i = 0; i < isInsectLand.length; i++){
    			$.get('<%=basePath%>/farm/addHarvest', {landId: parseInt(isInsectLand[i])}, addHarvest);
    		}
    		clear.play();
    	}else if(flies == 20){
    		sun.style.display = 'none';
    	}else if(flies == 30){
    		flies = 0;
    		isInsectLand = [];  // 清空列表
    	}
    	/* console.log(flies); */
    }
    
    function addHarvest(result){
    	var landId = "#land_" + result.msg.split("_")[0];
    	var upNum = result.msg.split("_")[1];
    	var upLabel = '<a id="upLabel" style="position: absolute; display: block; color: #FFFF00; font-weight: 700; text-align: center; font-size: 14px; line-height: 20px; width: 60px; height: 20px; left: 20px; top: 0;">果实+' + upNum + '</a>';
		$(landId).append(upLabel);
		$.messager.show({
            title: "消息",
            msg: '增产' + upNum
        });
		setTimeout('clearUpLabel()', 5000);
    }
    
    function clearLightning(){
		$("#lightningImg").remove();
	}
    
    function successfulKillInsectByLight(result){
    	// 实现重新加载
		parent.document.getElementById("menu").src="menu.jsp";
		if(result.code >= 0){
			// 播放成功的声音
			light.play();
			console.log("播放声音！");[]
			/* $.messager.show({
	            title: "消息",
	            msg: result.msg
	        }); */
		}else{
			// 播放失败的声音
			negativeSound.play();
		}
    }
    
	// 设置FarmView的内容
	// 根据后台的通知信息
    function setFarmView(data){
    	var farmView = eval('(' + data + ')'); 
    	/* console.log(farmView); */
    	var seedId = farmView.seedId;
    	var landId = "land_" + farmView.landId;
    	var curStage = farmView.curStage;  // 当前种子的阶段
    	var imgWidth = farmView.imgWidth;
		var imgHeight = farmView.imgHeight;
		var offsetX = farmView.offsetX;
		var offsetY = farmView.offsetY;
		var curStage = farmView.curStage;
		var isInsect = farmView.isInsect;  // 是否生虫
		var residueTime = farmView.stageTime - farmView.curStageThroughTime;  // 植物生长剩余时间

		// 获取土地
		var landDiv = document.getElementById(landId);
		// 设置光标
		let flag = 0;
		if(isInsect == 1){
			// 判断当前土地上是否已经存在insectImg
			var children = document.getElementById(landId).children;
			for(let i = 0; i < children.length; i++){
				if(children[i].className == "insectImg"){
					flag = 1;
					break;
				}
			}
			landDiv.style.cursor = "url(<%=basePath%>images/ico/killWorm.ico), default";
		}
		
		$("#" + landId).html("");
		<%-- var lightningImg = '<img style="position: absolute;bottom: 10px; right: 0; width: 50%; height: 40%;" id="lightningImg" src="<%=basePath%>/images/gif/lightning.GIF">';
		$("#" + landId).append(lightningImg); --%>
		
		
		if(residueTime <= 0) $("#" + landId).append('<a class="timeNumber">✔</a>');
		else $("#" + landId).append('<a class="timeNumber">' + residueTime + '</a>');
		var img = document.createElement('img');
		
		if(isInsect != 1){
			if(curStage < 5){
				landDiv.style.cursor = "url(<%=basePath%>images/ico/wait.ico), default";
				if(isInsect == 2){
					$("#" + landId).attr('onclick', 'showSeedBagList(this)');
				}
			}else if(curStage == 5){
				img.className = 'mature';
				landDiv.style.cursor = "url(<%=basePath%>images/ico/harvest.ico), default";
				if(isInsect == 2){
					$("#" + landId).attr('onclick', 'harvest(this)');
					/* $("#" + landId).removeAttr("onclick");
					$("#" + landId).unbind("click");
					$("#" + landId).click(harvest); */
				}
			}else if(curStage == 9){
				/* className = 'withered'; */
				img.className = 'withered';
				landDiv.style.cursor = "url(<%=basePath%>images/ico/cleanLand.ico), default";
				/* $("#" + landId).removeAttr("onclick");
				$("#" + landId).unbind("click"); */
				$("#" + landId).attr('onclick', 'cleanLand(this)');
			}else{
				landDiv.style.cursor = "url(<%=basePath%>images/ico/plant.ico), default";
			}
		}
		
		var titleStr = '名称：' + farmView.seedName + 
		   '\n状态：' + farmView.stageTitle +
		   '\n产量：' + farmView.harvest +
	 	   '\n该阶段已经生虫：' + isInsect;
	 	  /* '\n该阶段已经生虫：' + isInsect; */
			
		// 土地上面的种子阶段图片	
		img.style.width = imgWidth / 2.0 + 'px';
		img.style.height = imgHeight / 2.0 + 'px';
		img.style.marginLeft = offsetX / 2.0 + 'px';
		img.style.marginTop = offsetY / 2.0 + 'px';
		img.style.zIndex = '1';
		img.title = titleStr;
		img.src = '<%=basePath%>/images/crops/' + seedId + '/' + curStage + '.png';
		
		// 先添加的虫子，再添加的种子阶段图片
		if(isInsect == 1){
			// 如果已经生虫
			var insectImg = document.createElement('img');
			insectImg.src = '<%=basePath%>/images/insect3.png';
			insectImg.style.position = 'absolute';
			insectImg.style.width = '40px';
			insectImg.style.height = '30px';
			insectImg.style.right = '10px';
			insectImg.style.bottom = '20px';
			insectImg.style.zIndex = '0';
			insectImg.className = "insectImg";
			insectImg.id = 'insect_' + farmView.landId;
			
			
			var warningImg = document.createElement('img');
			warningImg.src = '<%=basePath%>/images/warning.png';
			warningImg.style.position = 'absolute';
			warningImg.style.width = '100px';
			warningImg.style.height = '80px';
			warningImg.style.right = '0';
			warningImg.style.top = '5px';
			warningImg.style.zIndex = '2';
			warningImg.className = "warningImg";
			
			landDiv.appendChild(insectImg);
			landDiv.appendChild(warningImg);
			if(flag == 0) wormSound.play();
			$("#" + landId).attr("onclick", 'killInsect(this)');
		}
		
		if(curStage == 5){
			// 种子成熟，显示特效
			var shineImg = document.createElement('img');
			shineImg.src = '<%=basePath%>/images/shine2.png';
			shineImg.style.position = 'absolute';
			shineImg.style.width = '90px';
			shineImg.style.height = '60px';
			shineImg.style.right = '10px';
			shineImg.style.top = '20px';
			shineImg.style.zIndex = '0';
			shineImg.className = "mature";
			landDiv.appendChild(shineImg);
		}
		
		landDiv.appendChild(img);
		
    }
	
	function clearUpLabel(){
		$("#upLabel").remove();
	}
	
	//点击种子商店后，恢复页面原布局
	parent.document.getElementById("tools").src = "tools.jsp";
	
	// 表示当前点击的土地id
	var landId;
	
	// 获取seed表中的所有数据
	var seeds;
	$(function(){
    	getRemoteData('<%=basePath%>/seed/list', setSeeds);
    });
	
	function setSeeds(data){
		seeds = data;
	}
	
	// 展示页面的土地
	$(function(){
		for(let i = 1; i <= 5; i++){
			for(let j = 1; j <= 4; j++){
				var left = 120 * (j - 1) + 100 * (i - 1);
				var top = 130 * (i - 1) + 50 * (4 - j);
				var z = 6 - i;
				var id = "land_" + i + "" + j;
				$(".content").append(
						'<div id="' + id + '" onclick="showSeedBagList(this)" class="land image_' + 
						(j - 1) + '" style="cursor: ' + "url(<%=basePath%>images/ico/plant.ico), default" + 
						'; z-index: ' + z + '; margin-left: ' + left + 'px; margin-top:' + top + 'px">'
				);
			}
		}
	})
	
	function showSeedBagList(value){
		// 设置当前选中土地的Id
		landId = value.id;
		$('#userChoiceDialog').dialog('open');
		// 显示seedBag页面
		// 同时播放音乐
		plant.play();
		getRemoteData('<%=basePath%>/seedBag/getList', display);
	}
	
	function display(list){
		let len = list.length;
		$(".switcher").css("width", (len) * 100 + "px");
		for(let i = 0; i < len; i++){
			var seedId = list[i].seedId;
			var number = list[i].number;
			let seedsLen = seeds.length;
			var seedInfo;
			for(let j = 0; j < seedsLen; j++){
				if(seeds[j].seedId == seedId){
					seedInfo = seeds[j];
					break;
				}
			}
			
			// 设置title
			var landDemand = seedInfo.landDemand;
			if(landDemand == '0'){
				landDemand = '黄土地';
			}else if(landDemand == '1'){
				landDemand = '黑土地';
			}else if(landDemand == '2'){
				landDemand = '红土地';
			}else{
				landDemand = '金土地';
			}
			
			var titleStr = seedInfo.seedName + 
						   '\n种子Id：' + seedInfo.seedId +
					   	   '\n单季产量：' + seedInfo.seasonHarvest + '个果实' + 
					       '\n果实单价：' + seedInfo.fruitUnitPrice + '金币' +
					       '\n季数：' + seedInfo.xSeasonCrops + '季作物' +
					       '\n土地需求：' + landDemand;
			
			$(".switcher").append(
					'<div class="box">' + 
    					'<div class="circle"><a>' + number + '</a></div>' +
    					'<img title="' + titleStr + '" onclick="choiceSeed(this)" id="seed_' + seedId + '" src="<%=basePath%>/images/crops/' + seedId + '/5.png" />' +
    				'</div>'
    		);
		}
	}
	
	var offsets = 0;
	function scorllRight(){
		if($(".switcher").width() + offsets > 400){
			offsets -= 100;
			$(".switcher").css("margin-left", offsets + "px");
		}
	}

	function scorllLeft(){
		if(offsets < 0){
			offsets += 100;
			$(".switcher").css("margin-left", offsets + "px");
		}
	}
	
	
	// 选择植物
	function choiceSeed(value){
		$.messager.confirm('种子种植', '确认种植种子吗？', function(r){
			if(r){
				// seedId表示当前选择植物的id
				var seedId = value.id.split("seed_")[1];
				// 获取seeds的长度
				let seedsLen = seeds.length;
				var seedInfo;
				for(let i = 0; i < seedsLen; i++){
					if(seeds[i].seedId == seedId){
						seedInfo = seeds[i];
						break;
					}
				}
				
				/* 判断土地和当前选中种子的需求土地是否一致 */
				var landDiv = document.getElementById(landId);
				// 判断土地是否被占用
				if(landDiv.getElementsByTagName("img").length != 0){
					$.messager.show({
			            title: '消息',
			            msg: '土地已被占用！'
			        });
					// 播放声音
					negativeSound.play();
					
				}else if(seedInfo.landDemand != landId.split("land_")[1][1] - 1){
					// 获取landId的最后一位：landId.split("land_")[1][1]。 0表示黄土地，1表示黑土地，2表示红土地，3表示金土地
					$.messager.show({
			            title: '消息',
			            msg: '土地类型不匹配！'
			        });
					// 播放声音
					negativeSound.play();
					
				}else{
					// 获取土地id
					$("#" + landId).html("");
					var img = document.createElement('img');
					// 土地上面的种子阶段图片
					img.src = '<%=basePath%>/images/crops/basic/0.png';
					img.style.width = '23.5px';
					img.style.height = '50px';
					img.style.left = '37.5px';
					img.style.top = '100.5px';
					img.style.zIndex = '1';
					img.style.position = 'absolute';
					landDiv.appendChild(img);
					// 播放声音
					hasPlantedSound.play();
					$.get('<%=basePath%>/farm/plant', {landId: parseInt(landId.split("land_")[1]), seedId: parseInt(seedId)}, sucessfulPlant);
					<%-- request({landId: parseInt(landId.split("land_")[1]), seedId: parseInt(seedId)}, "post", "<%=basePath%>farm/plant", callBack); --%>
				}
			}else{
				$.messager.progress('close');
			}
			
		})
	}
	
	
	// 种植成功
	function sucessfulPlant(result){
		$(".switcher").html("");
		$('#userChoiceDialog').dialog('close');
		
		/* // 播放声音
		hasPlantedSound.play(); */
		
		$.messager.show({
            title: "消息",
            msg: result.msg
        });
	}
	
	// 删除虫子
	function killInsect(value){
		$('#userChoiceDialog').dialog('close');
		console.log("删除虫子的Id ========== " + value.id);
		landId = value.id;
		// 获取当前土地下所有子节点
		var land = document.getElementById(value.id);
		var children = land.children;
		var insectChild = [];
		for(let i = children.length - 1; i >= 0; i--){
			if(children[i].className == "insectImg" || children[i].className == "warningImg"){
				children[i].remove();
			}
		}
		// 播放成功的声音
		killWormSound.play();
		// 杀掉虫子之后，重置鼠标点击事件
		$("#" + landId).attr('onclick', 'showSeedBagList(this)');
		$.get('<%=basePath%>/farm/killInsect', {landId:parseInt(landId.split("land_")[1])}, successfulKillInsect);
	}
	
	function successfulKillInsect(result) {
		// 实现重新加载
		parent.document.getElementById("menu").src="menu.jsp";
		if(result.code >= 0){
			// 播放成功的声音
			killWormSound.play();
			$.messager.show({
	            title: "消息",
	            msg: result.msg
	        });
		}else{
			// 播放失败的声音
			negativeSound.play();
		}	
	}

	// 收获
	function harvest(value) {
		$('#userChoiceDialog').dialog('close');
		landId = value.id;
		
		// 获取当前土地下所有子节点
		var children = document.getElementById(value.id).children;
		var harvestChild = [];
		for(let i = children.length - 1; i >= 0; i--){
			if(children[i].className == "mature"){
				children[i].remove();
			}
		}
		// 播放成功的声音
		harvestSound.play();
		$.get('<%=basePath%>/farm/harvest', {landId:parseInt(landId.split("land_")[1])}, successfulHarvest);
		
	}
	function successfulHarvest(result) {
		// 实现重新加载
		parent.document.getElementById("menu").src="menu.jsp";
		if(result.code >= 0){
			/* // 播放成功的声音
			harvestSound.play(); */
			
			$.messager.show({
	            title: "消息",
	            msg: result.msg
	        });
		}else{
			// 播放失败的声音
			negativeSound.play();
		}	
	}
	
	/* 除草 */
	function cleanLand(value) {
		$('#userChoiceDialog').dialog('close');
		landId = value.id;
		// 获取当前土地下所有子节点
		var children = document.getElementById(value.id).children;
		var witheredChild = [];
		for(let i = children.length - 1; i >= 0; i--){
			if(children[i].className == "withered"){
				children[i].remove();
				break;
			}
		}
		// 播放成功的声音
		cleanLandSound.play();
		$.get('<%=basePath%>/farm/cleanLand',{landId:parseInt(landId.split("land_")[1])},successfulCleanLand);
		value.style.cursor = "url(<%=basePath%>images/ico/plant.ico), default";
		$("#" + landId).attr("onclick", 'showSeedBagList(this)');

	}
	function successfulCleanLand(result) {
		// 实现重新加载
		parent.document.getElementById("menu").src="menu.jsp";
		if(result.code >= 0){
			/* // 播放成功的声音
			cleanLandSound.play(); */
			
			$.messager.show({
	            title: "消息",
	            msg: result.msg
	        });
		}else{
			// 播放失败的声音
			negativeSound.play();
		}	
	}
	
</script>

<script type="text/javascript">
	var rain = document.getElementById("rain");
	var wid = window.innerWidth;
	var heg = window.innerHeight;
	var ctx = rain.getContext("2d");
	var num = 500;
	var arr = [];
	
	rain.width = wid;
	rain.height = heg;
	
	function DrawSnow(){
		for(var i=0;i < num;i++){
			arr.push({
				x: Math.random() * wid,
				y: Math.random() * heg,
				r: Math.random() * 4,
				d: Math.random() + 1
			})
		}
		ctx.save();
		ctx.clearRect(0, 0, wid, heg);
		ctx.beginPath();
		ctx.fillStyle = "rgba(165, 189, 203, 0.8)";
		for(var i = 0; i < num; i++){
			var p = arr[i];
			ctx.moveTo(p.x, p.y);
			ctx.arc(p.x, p.y, p.r, 4, 4 * Math.PI);
		}
		ctx.fill();
		move();
		
	}
	var angle=0;
	function move(){
		angle += 0.01;
		for(var i = 0;i < num; i++){
			var p = arr[i];
			p.y += Math.pow(p.d, 3) + 10;
			p.x += Math.sin(angle) * 2;
			
			if(p.y > heg){
				arr[i] = {x : Math.random() * wid, y : 0, r : p.r, d : p.d};
			}
		}
		
	}
	
	setInterval(DrawSnow, 50);
			
</script>
</body>
</html>